<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css"/>
		<script type="text/javascript" src="js/jquery.js"></script>
    	<script type="text/javascript" src="js/bootstrap.min.js"></script>
    	<script type="text/javascript" src="js/jquery.cookie.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
		
			body {
				background-image: url(img/background.jpg);
				background-size: 100% 100%;
				background-repeat:no-repeat;
				height: 1000px;
			}
		
			span {
				background-color: #E53645;
				color: white;
				font-size: medium;
				font-weight: 900;
				padding: 0.2rem;
				margin: 0.5rem;
				display: inline-block;
				font-weight: bolder;
				width: 8rem;
				text-align: center;
				border:2px solid #FDF578;
				border-radius:25px
			}
			
			p {
				text-align: center;
				font-size: xx-large;
				font-weight: 900;
				color: #FDF578;
			}
			
			#winlist,#selectrank {
				margin: 10px auto;
				width: 96%;
				text-align: center;
			}
			
			#drawlist {
				margin: 14% auto 5%;
				width: 48%;
				text-align: left;
				float: left;
			}
			
			#resultlist {
				margin: 14% 2% 5%;
				width: 30%;
				text-align: left;
				float: left;
			}
			
			#bigdiv {
				width: 96%;
			}
			
			#start {
				margin: 22% auto 10%;
				padding: 0.5rem;
				text-align: center;
				font-size: x-large;
				font-weight: 900;
				background-color: red;
				color: #FDF578;
				width: 140px;
				height: 140px;
				line-height: 120px;
				border:5px solid;
				border-radius:70px;
				float: left;
			}
			
			#box {
				margin: 20px auto;
				text-align: center;
				font-size: 9rem;
				font-weight: 900;
				color: #FDF578;
			}
			
			#button {
				margin: 4rem auto 1rem;
				padding: 0.5rem;
				text-align: center;
				font-size: large;
				font-weight: 900;
				background-color: #E53645;
				color: #FDF578;
				width: 10%;
				border:2px solid;
				border-radius:25px;
			}
			
			#rank {
				font-size: 3rem;
				background-color: #E53645;
				color: #FDF578;
			}
			
			.flip {
				width: 300px;
				height: 100px;
				padding: 20px;
				position: relative;
				margin: 2% 0;
			}
			.flip .p2, .flip .p1 {	
				display: block;
				position: absolute;
				left: 20px;
				top: 20px;
				width: 600px;
				height: 100px;
				-webkit-transition: all 0.5s ease-in-out;
				-o-transition: all 0.5s ease-in-out;
				transition: all 0.5s ease-in-out;
				backface-visibility:hidden
			}
			.flip .p1{
				background: #E53645;
				z-index: -1;
				-webkit-transform: rotateY(180deg);
				 -ms-transform: rotateY(180deg);
				 -o-transform: rotateY(180deg);
				 transform: rotateY(180deg);
			}
			.p2 {
				background: #E53645;
				border-radius:25px;
				font-size: 8rem;
			}
			.p1 {
				background: #E53645;
				border-radius:25px;
			}
			.flip:hover .p2{
				-webkit-transform: rotateY(180deg);
				 -ms-transform: rotateY(180deg);
				 -o-transform: rotateY(180deg);
				 transform: rotateY(180deg);
				 backface-visibility:hidden;
			}
			.flip:hover .p1 {
				z-index: 2;
				-webkit-transform: rotateY(0deg);
				 -ms-transform: rotateY(0deg);
				 -o-transform: rotateY(0deg);
				 transform: rotateY(0deg);
				 backface-visibility:hidden;
			}
			
		</style>
		<script>
			
			localStorage.jdm = [
			"张三","李四","王五","赵六","孙一","李二",
			"张三1","李四1","王五1","赵六1","孙一1","李二1",
			"张三2","李四2","王五2","赵六2","孙一2","李二2",
			"张三3","李四3","王五3","赵六3","孙一3","李二3",
			"张三4","李四4","王五4","赵六4","孙一4","李二4",
			"张三5","李四5","王五5","赵六5","孙一5","李二5",
			"张三11","李四11","王五11","赵六11","孙一11","李二11",
			"张三22","李四22","王五22","赵六22","孙一22","李二22",
			"张三33","李四33","王五33","赵六33","孙一33","李二33",
			"张三44","李四44","王五44","赵六44","孙一44","李二44",
			"张三55","李四55","王五55","赵六55","孙一55","李二55",
			"张三56","李四56","王五56","赵六56","孙一56","李二56"
			];
			localStorage.guest = ["嘉宾1","嘉宾2","嘉宾3"];
			localStorage.old = ["张三","李四"];
			localStorage.prizenum1 = 5;
			localStorage.prizenum2 = 10;
			localStorage.prizenum3 = 15;
			localStorage.prizenum4 = 1;
			var jdm = localStorage.jdm.split(",");   /*所有员工*/
	    	var guest = localStorage.guest.split(",");  /*嘉宾*/
	    	var old = localStorage.old.split(",");	/*老员工*/
	    	var all = jdm.concat(guest);
	    
		    var drawlist = "<p>抽奖名单<p>";  /*初始化人员列表*/
			$(function() {
			    for(var i = 0; i < all.length; i++) {
			    	var spannum = i + 1;
			    	drawlist += "<span id='num" + spannum + "' data-name='" + all[i] + "'>" + all[i] + "</span>";
			    }
		    	$("#drawlist").html(drawlist);
		    	
		    	
		    	$("html").bind("keydown",function(event){    
		    		if(event.keyCode== 13) {
		    			doit();
		    		}
    			});  
			});
			
			var mytime=null;
			var myjdmtime=null;
			var winnum = 0; /*获奖号码*/
			var specialnum = 0;
			
			var prize1 = [];//获奖清单
			var prize2 = [];
			var prize3 = [];
			var prize4 = [];
			

			function doit(){
				var bt=window.document.getElementById("button");
				var box=window.document.getElementById("box");
				var prizerank = $('#rank').val();
				if(mytime==null){  //点击开始抽奖
					if(isenough(prizerank)){
						box.innerHTML="该奖项已抽完，谢谢！";
						$(bt).css("background-color","gray");
					} else if(prizerank == 4) { 
						bt.innerHTML="停止抽奖";
						showspecial();//老员工抽奖
					} else {
						bt.innerHTML="停止抽奖";
						show();//所有员工抽奖
					}
				}else { //准备停止抽奖
					if(prizerank == 1) {
						if($.inArray(all[winnum],guest) == -1) {//不是嘉宾
							processprize1(bt);//一等奖处理逻辑
						} else {
							clearTimeout(mytime);
							mytime=null;
							selectjdm(); //选到jdm员工再停下
						}
					} else if (prizerank == 2) {
						if($.inArray(all[winnum],guest) == -1) {//不是嘉宾
							processprize2(bt);//二等奖处理逻辑
						} else {
							clearTimeout(mytime);
							mytime=null;
							selectjdm(); //选到jdm员工再停下
						}
					} else if(prizerank == 3) {
						processprize3(bt);//三等奖处理逻辑
					} else if(prizerank == 4) {
						processprize4(bt);//老员工奖处理逻辑
					}
				}
			}
			
			function show() {
				var box=window.document.getElementById("box");
				var num=Math.floor((Math.random()*100000))%all.length;
				box.innerHTML=all[num];
				winnum = num;
				mytime=setTimeout("show()",1);
			}
			
			function showspecial() {
				var box=window.document.getElementById("box");
				var num=Math.floor((Math.random()*100000))%old.length;
				box.innerHTML=old[num];
				specialnum = num;
				mytime=setTimeout("showspecial()",1);
			}
			
			function selectjdm() {
				var box=window.document.getElementById("box");
				var num=Math.floor((Math.random()*100000))%all.length;
				box.innerHTML=all[num];
				winnum = num;
				if($.inArray(all[winnum],guest) == -1) {//找到all里面的jdm员工停止
					clearTimeout(myjdmtime);
					myjdmtime=null;
					var bt=window.document.getElementById("button");
					var prizerank = $('#rank').val();
					if(prizerank == 1) {
						processprize1(bt);
					} else {
						processprize2(bt);
					}
				} else {
					myjdmtime=setTimeout("selectjdm()",1);
				}
			}
			
			function processprize1(bt) {
				stopdraw(bt);
				name = all[winnum];
				var $winspan = $("span[data-name=" + name + "]");//获得中奖的span
				$winspan.css("background-color","#B2E0FF");
				$winspan.clone().appendTo("#result1");
				all.splice(winnum, 1);//将获奖者从抽奖箱里去除
				prize1.push(name);//存到localStorage中
				localStorage.prize1 = prize1;
			}
			
			function processprize2(bt) {
				stopdraw(bt);
				name = all[winnum];
				var $winspan = $("span[data-name=" + name + "]");
				$winspan.css("background-color","darksalmon");
				$winspan.clone().appendTo("#result2");
				all.splice(winnum, 1);//将获奖者从抽奖箱里去除
				prize2.push(name);//存到localStorage中
				localStorage.prize2 = prize2;
			}
			
			function processprize3(bt) {
				stopdraw(bt);
				name = all[winnum];
				var $winspan = $("span[data-name=" + name + "]");
				$winspan.css("background-color","lightgreen");
				$winspan.clone().appendTo("#result3");
				all.splice(winnum, 1);//将获奖者从抽奖箱里去除
				prize3.push(name);//存到localStorage中
				localStorage.prize3 = prize3;
			}
			
			function processprize4(bt) {
				stopdraw(bt);
				name = old[specialnum];
				var $winspan = $("span[data-name=" + name + "]");
				$winspan.css("background-color","darkslategray");
				$winspan.clone().appendTo("#result4");
				old.splice(specialnum, 1);//将获奖者从抽奖箱里去除
				prize4.push(name);//存到localStorage中
				localStorage.prize4 = prize4;
			}
			
			function stopdraw(bt) {//停止抽奖
				bt.innerHTML="开始抽奖";
				clearTimeout(mytime);
				mytime=null;
			}
			
			function isenough(prizerank) {
				var isenough = false;
				switch (prizerank) {
					case "1":
						isenough = prize1.length >= localStorage.prizenum1;
						console.log("isenough:" + isenough);
						break;
					case "2":
						isenough = prize2.length >= localStorage.prizenum2;
						break;
					case "3":
						isenough = prize3.length >= localStorage.prizenum3;
						break;
					case "4":
						isenough = prize4.length >= localStorage.prizenum4;
						break;
				}
				return isenough;
			}
			
			function changerank(rank) {
				if(isenough($(rank).val())) {
					$("#button").css("background-color","gray");
					$("#box").html("该奖项已抽完，谢谢！");
				} else {
					$("#button").css("background-color","red");
					$("#box").html("点击按钮开始抽奖！");
				}
				$(rank).blur();
			}
		</script>
	</head>
	<body>
		<div id="bigdiv">
			<div id="drawlist">
			</div>
			<div id="start" data-toggle="modal" data-target="#myModal">开始抽奖</div>
			<div id="resultlist">
				<p>中奖名单</p>
				<div class="flip">
		    		<p class="p1" id="result4"></p>
		    		<p class="p2">特 等 奖</p>
				</div>
				<div class="flip">
		    		<p class="p1" id="result1"></p>
		    		<p class="p2">一 等 奖</p>
				</div>
				<div class="flip">
		    		<p class="p1" id="result2"></p>
		    		<p class="p2">二 等 奖</p>
				</div>
				<div class="flip">
		    		<p class="p1" id="result3" style="height: 150px;"></p>
		    		<p class="p2" style="height: 150px;">三 等 奖</p>
				</div>
			</div>
		<!--<div id="box">新年快乐！</div>-->
		</div>
		
		<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                    <h4 class="modal-title" id="myModalLabel">抽奖</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12  text-center">
                          <div class="bg-primary" style="width:500px;height:300px;background-color: #E53645;" id="box" >
							点击开始！
                          </div>
                        </div>
                    </div>
                    <div id="selectrank"> 
						<select name="rank" id="rank" onchange="changerank(this);">
							<option value="1">一等奖</option>
							<option value="2">二等奖</option>
							<option value="3">三等奖</option>
							<option value="4">长期服务特等奖</option>
						</select>
					</div>
                    <div class="row" style="padding-top: 2%;">
                        <div class="col-md-12  text-center">
                            <button type="button" id="button" onclick="doit();" class="btn btn-primary btn-lg" onclick="startdraw();">开始</button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
	</body>
</html>
